import * as React from 'react';
import { connect } from 'react-redux';
import { InputNumber, Row, Col, Slider, Spin } from 'antd';
import { get } from 'lodash';
import { mapTestStateToProps, mapTestDispatchToProps } from './common/connectProps';
import './Test.scss';

interface TestProps {
  // connected dispatch props
  updateTest: (obj: any) => any;
  removeTest: () => any;
  fetchTestDetail: () => any;

  // connected state props
  testAttachment: any;
  testProfile: any;
  testChildren: any;

  // own props
  testId: number;
  children: any;
}
interface TestState {
  timer: number;
}

class Test extends React.Component<TestProps, TestState> {
  static GAME_TIME = 10;
  static defaultProps: TestProps = {
    updateTest: () => {},
    removeTest: () => {},
    fetchTestDetail: () => {},

    testAttachment: {},
    testProfile: {},
    testChildren: {},

    testId: 0,
    children: null,
  };
  constructor(props: TestProps) {
    super(props);

    this.state = {
      timer: get(props.testProfile, 'content.timer', Test.GAME_TIME),
    };
  }

  componentWillReceiveProps(nextProps: any) {
    const { testId } = nextProps;
    const { testId: oldTestId } = this.props;

    if (testId !== oldTestId) {
      this.testDidChange(nextProps);
    }
  }

  componentDidMount() {
    this.testDidChange(this.props);
  }

  testDidChange(props: any) {
    const { fetchTestDetail, updateTest } = props;

    let timer = get(props.testProfile, 'content.timer', 0);
    if (timer === 0) {
      timer = Test.GAME_TIME;
      updateTest({ content: { timer } }).then(fetchTestDetail);
    } else {
      fetchTestDetail();
    }

    this.setState({
      timer,
    });
  }

  handleUpdateKnowledge = (knowledgeId: number) => {
    const { updateTest, fetchTestDetail, testProfile } = this.props;

    let { content } = testProfile;
    content = { ...content, knowledgeId };

    updateTest({ content }).then(fetchTestDetail);
  };

  handleUpdateTestTimer = (timer: number) => {
    const { updateTest, fetchTestDetail, testProfile } = this.props;

    this.setState({
      timer,
    });

    let { content } = testProfile;
    content = { ...content, timer };
    updateTest({ content }).then(fetchTestDetail);
  };

  getExtraProps() {
    return {
      handleUpdateKnowledge: this.handleUpdateKnowledge,
    };
  }

  // 每一关的倒计时设置
  renderTestTimer() {
    const { timer } = this.state;

    return (
      <div className="test-parser-name text-center">
        <h4 className="text-left test-parser-sub-title">倒计时</h4>
        <Row>
          <Col xs={{ span: 12, offset: 5 }} lg={{ span: 14, offset: 4 }}>
            <Slider
              min={1}
              max={30}
              value={timer}
              tipFormatter={(value: any) => `${value}秒`}
              onChange={this.handleUpdateTestTimer}
            />
          </Col>
          <Col xs={{ span: 2, offset: 0 }} lg={{ span: 2, offset: 0 }}>
            <InputNumber
              min={1}
              max={30}
              style={{ marginLeft: 16 }}
              value={timer}
              onChange={this.handleUpdateTestTimer}
            />
          </Col>
        </Row>
      </div>
    );
  }

  render() {
    const { children, ...testProps } = this.props;

    let outlet =
      children instanceof Function ? children(testProps, this.getExtraProps()) : children;

    const isLoading = false;

    return (
      <div className="test-parser-option-item text-left">
        <Spin spinning={isLoading}>
          <div className="text-center">
            {this.renderTestTimer()}
            {outlet}
          </div>
        </Spin>
      </div>
    );
  }
}

export default connect(
  mapTestStateToProps,
  mapTestDispatchToProps
)(Test);
